<template>
	<view>
		<view class="line"></view>
		<view class="chooseType">
			<text :class="accountType == item.accountType ? 'active' : ''" v-for="(item, i) in role" :key="i" v-text="item.name" @click="chooseAccount(item.accountType)"></text>
		</view>
		<view class="tips">
			<text class="pleaseBind">请绑定您的账号</text>
			<text class="pleaseConfirm">请绑定账号以确定您的身份信息</text>
		</view>

		<view class="from">
			<form @submit="formSubmit" class="uni-form-item">
				<view class="uni-form-item uni-column">
					<label for v-for="(item, i) in fromItem[accountType - 1]" :key="i">
						<text v-text="item.label"></text>
						<input class="uni-input" :name="item.name" placeholder-class="placeholderClass" :placeholder="item.placeholder" />
					</label>
				</view>

				<view class="next"><button form-type="submit" size="small" class="loginBtn" >下一步</button></view>
			</form>
		</view>
	</view>
</template>
<script>
import graceChecker from '../../js_sdk/graceui-dataChecker/graceChecker.js';
export default {
	data() {
		return {
			role: [
				{
					name: '老师',
					accountType: '1'
				},
				{
					name: '学生',
					accountType: '2'
				},
				{
					name: '家长',
					accountType: '3'
				}
			],
			accountType: 1,
			fromItem: [
				[
					{
						label: '姓名',
						name: 'name',
						placeholder: '请输入姓名'
					},
					{
						label: '身份证号',
						name: 'icCardNo',
						placeholder: '请输入身份证号'
					},

					{
						label: '手机号',
						name: 'mobile',
						placeholder: '请输入手机号'
					}
				],
				[
					{
						label: '姓名',
						name: 'name',
						placeholder: '请输入姓名'
					},
					{
						label: '身份证号',
						name: 'icCardNo',
						placeholder: '请输入身份证号'
					},

					{
						label: '手机号',
						name: 'mobile',
						placeholder: '请输入手机号'
					}
				],
				[
					{
						label: '学生姓名',
						name: 'name',
						placeholder: '请输入姓名'
					},
					{
						label: '学生身份证号',
						name: 'icCardNo',
						placeholder: '请输入身份证号'
					},

					{
						label: '家长手机号',
						name: 'mobile',
						placeholder: '请输入手机号'
					}
				]
			]
		};
	},
	onLoad() {},
	methods: {
		async formSubmit(e) {
			let that = this;
			let rule = [
				{
					name: 'name',
					checkType: 'string',
					checkRule: '1,4',
					errorMsg: '请输入姓名'
				},
				{
					name: 'mobile',
					checkType: 'phoneno',
					checkRule: '',
					errorMsg: '请输入正确手机号码'
				},
				{
					name: 'icCardNo',
					checkType: 'string',
					checkRule: '18,18',
					errorMsg: '请输入正确的身份证号'
				}
			];
			let formData = e.detail.value;
			let params = JSON.stringify(
				Object.assign(formData, {
					accountType: that.accountType
				})
			);
			let checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				let resp = await this.$http.get({
					url: `/message/sms/send?phone=${e.detail.value.mobile}`
				})
				uni.navigateTo({
					url: '/pagesLogin/loginRegister/checkMsg?params=' + params
				});
				if (resp.code != 0) {
					uni.showToast({
						title: resp.message,
						icon: 'none'
					});
				} 
			} else {
				uni.showToast({
					title: graceChecker.error,
					icon: 'none'
				});
			}
		},
		chooseAccount(e) {
			this.accountType = e;
		},
		sendMsg(mobile) {
			this.$http.get({
				url: `/message/sms/send?phone=${mobile}`
			});
		}
	},
	components: {}
};
</script>
<style lang="scss" scoped>
.line {
	width: 100%;
	height: 20upx;
	background: #f2f4f5;
}

.from {
	padding: 50upx;
	width: 100%;
	box-sizing: border-box;

	.uni-form-item {
		text {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.uni-input {
			border-bottom: 1px solid #ccc;
			height: 60upx;
			margin-bottom: 20upx;
			// color: #cccccc;
		}

		.placeholderClass {
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #cccccc;
		}
	}
}

.chooseType {
	width: 100%;
	display: flex;
	justify-content: space-around;
	font-size: 28upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: rgba(102, 102, 102, 1);
	padding-top: 85upx;

	text {
		padding: 6upx;
	}

	.active {
		color: #3c68e6;
		border-bottom: 4upx solid #3c68e6;
	}
}

.tips {
	padding: 50upx;

	.pleaseBind {
		display: block;
		font-size: 40upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.pleaseConfirm {
		display: block;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(204, 204, 204, 1);
	}
}

// .next {
// 	display: block;
// 	margin: 100upx auto;
// 	text-align: center;
// 	button{
// 		background: #3C68E5;
// 		font-size:30upx;
// 		font-family:Source Han Sans CN;
// 		font-weight:400;
// 		color:rgba(255,255,255,1);
// 	}
// }
</style>
